<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="box">
        <div id="con">
            <p>观看排行榜<span style="border:1px blue solid;background-color:white">每日</span><span>每周</span><span>全部</span></p>
            <ul style="display:block">
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
            </ul>
            <ul >
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
            </ul>
            <ul>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
               <li><small></small><a href="javascript:;"></a><div id="div"><img src=""><span><font></font><input type="button" value="▶播放"></span></div></li>
            </ul>
            <footer><a href="javascript:;">更多>></a></footer>
        </div>
        
    </div>
</body>
<script type="text/javascript">
	var oCon=document.getElementById("con");
	var aP=oCon.getElementsByTagName("p")[0];
	var aSpan=aP.getElementsByTagName("span");
	var aUl=oCon.getElementsByTagName("ul");
	var arrText=[
			 	"解密：关于地球与人类的一千零一问",
                "经典传奇：探索全世界重大历史事件…",
                "眼界：展现普通人的曲折命运和动人…",
                "档案（BTV）：惊人事件和传奇背后…",
                "世纪十录：30个震惊世界的top…",
                "身边的毛泽东：警卫员解密毛泽东…",
                "新电影传奇：每一部电影都有自己的",
                "档案(上世纪纪实频道：解密档案中)",
                "探寻传世国宝的千古传奇…",
                "纪实系列：讲述社会百态，透视事实…"
			]
	var arrImg=[
			 "JS1.png",
            "JS2.png",
            "JS3.png",
            "JS4.png",
            "JS5.png",
            "JS6.png",
            "JS7.png",
            "JS8.png",
            "JS9.png",
            "JS10.png"
	]
	
	
	for(var i=0;i<aUl.length;i++){
		fn(aUl[i]);
	};
	function fn(l){
		var aLi=l.getElementsByTagName("li");
		var aSmall=l.getElementsByTagName("small");
		var aA=l.getElementsByTagName("a");
		var aDiv=l.getElementsByTagName("div");
		var aFont=l.getElementsByTagName("font");
		var aImg=l.getElementsByTagName("img");
		var aInp=l.getElementsByTagName("input");
		//数据加载
		for(var i=0;i<aSmall.length;i++){
			aSmall[i].innerHTML=i+1;
			aA[i].innerHTML=arrText[i];
			aDiv[i].style.display="none";
			aImg[i].src=arrImg[i];
			aFont[i].innerHTML=arrText[i];
		};
		for(var i=0;i<aLi.length;i++){
			aLi[i].index=i;
			aLi[i].onmouseover=function(){
				//先干掉所有的
				for(var i=0;i<aLi.length;i++){
					aDiv[i].style.display="none";
					aA[i].style.display="block";
					aLi[i].style.height="";
				};
				//自己显示
				aDiv[this.index].style.display="block";
				aA[this.index].style.display="none";
				this.style.height="100px";
			}
			
		};
	}
	//解决一下span之间的切换
	for(var i=0;i<aSpan.length;i++){
		aSpan[i].index=i;
		aSpan[i].onclick=function(){
			for(var i=0;i<aSpan.length;i++){
				aSpan[i].style.background="";
				aSpan[i].style.border="";
				aUl[i].style.display="none";
			};
			aUl[this.index].style.display="block";
			this.style.background="#fff";
			this.style.border="1px blue solid";
			
			
		}
		
	};
	
	
</script>
</html>